<template>
  <v-container id="fileSearch">
    <v-card class="serch-condition">
      <input type="text" placeholder="请输入内容" id="searchInput" />
      <v-btn
        @click="search"
        tile
        color="#e8e8e8"
        max-width="35"
        class="btn searchbtn"
      >
        <span class="iconfont icon-sousuo"></span>
        查询
      </v-btn>
      <v-tooltip bottom class="tipArea">
        <template v-slot:activator="{ on, attrs }">
          <span
            v-bind="attrs"
            v-on="on"
            class="wenhao icons iconfont icon-wenhao tipspan"
          ></span>
        </template>
        <!-- <span>Tooltip</span> -->
        <div class="hint">
          <h3>关键字搜索说明</h3>
          <p>通配符种类：*通配0-N个词 ; ？</p>
          <p>
            通配1个此通配符位置：可以放置条件的前端、中间和末端，例如：*very、goo*、th*nk
          </p>
          <p>
            注意：支持一个字母更通配符的搭配，但不建议此方式搜索，例如：a*或者*a
          </p>
        </div>
      </v-tooltip>
    </v-card>
    <v-card class="serch-container">
      <v-row no-gutters>
        <v-col cols="12">
          <v-card class="pa-2 fileName" outlined tile> 文件 </v-card>
        </v-col>
      </v-row>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: "Fulltextretrieval",

  data() {
    return {};
  },

  mounted() {
    // this.addLog();
  },

  methods: {
    search() {
      console.log("clickme");
    },
    async addLog() {
      let params = {
        topFolderId: 806,
        token: "003433d3c450c7304d5eb8f40d70b7eda850",
      };
      let { data } = await this.$get(
        "/api/services/Folder/GetChildrenFolders",
        params
      );
      console.log(data, "res");
    },
  },
};
</script>

<style lang="scss">
$bg-color: linear-gradient(to top, #f4f4f4, #f6f6f6, #efefef);
#fileSearch {
  max-width: unset;
  .serch-condition {
    display: flex;
    #searchInput {
      border: 1px solid #ddd;
      text-indent: 1em;
      min-width: 300px;
    }
    .tipArea {
      border-left: 1px solid #ddd;
    }
    .tipspan {
      line-height: 35px;
      padding: 0 10px;
      background: $bg-color;
      font-size: 19px;
      border: 1px solid #ddd;
      &:hover {
        // border: 1px solid #1d1d1d;
        cursor: pointer;
      }
    }
  }
  .fileName {
    font-weight: 600;
    background: $bg-color;
    border-radius: 3px !important;
  }
  .searchbtn {
    background: $bg-color;
    border: 1px solid #ddd;
  }
}
.v-tooltip__content {
  background: white !important;
  border: 1px solid #ddd;
  .hint {
    color: black;
    border-radius: 5px;
    width: 400px;
    p {
      margin: 5px !important;
    }
  }
}
</style>
